<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>产品详情</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
    <link rel="stylesheet" href="../../../static/wxui/lib/weui.min.css" th:href="@{/wxui/lib/weui.min.css}">
    <link rel="stylesheet" href="../../../static/wxui/css/jquery-weui.css" th:href="@{/wxui/css/jquery-weui.css}">
    <link rel="stylesheet" href="../../../static/wxui/css/style.css" th:href="@{/wxui/css/style.css}">
</head>
<body ontouchstart>
<!--主体-->
<div class="weui-content">
    <!--产品详情-->
    <div class="weui-tab">
    <input type="hidden" th:value="${goods.id}" id="goodsId"/>
        <div class="weui-navbar" style="position:fixed; top:0; left:0; right:0; height:44px;">
            <div class=" wy-header-icon-back" style="z-index: 3;"><span></span></div>
            <a class="weui-navbar__item proinfo-tab-tit weui-bar__item--on" href="#tab1">商品</a>
            <a class="weui-navbar__item proinfo-tab-tit" href="#tab2">详情</a>
            <a class="weui-navbar__item proinfo-tab-tit " href="#tab3" onclick="listComment()">评价</a>

        </div>
        <div class="weui-tab__bd proinfo-tab-con">
            <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                <!--主图轮播-->
                <div class="swiper-container swiper-zhutu">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" th:each="img :${imgs}"><img th:src="${img}"/></div>
                    </div>
                    <div class="swiper-pagination swiper-zhutu-pagination"></div>
                </div>
                <div class="wy-media-box-nomg weui-media-box_text">
                    <h4 class="wy-media-box__title" th:text="${goods.title}">俞兆林卫衣 男2017春新款运动休闲印花大码潮人卫衣卫裤加厚外套套装男</h4>
                    <div class="wy-pro-pri mg-tb-5">¥<em class="num font-20" th:text="${goods.price}">296.00</em></div>
                    <p class="weui-media-box__desc" th:text="${goods.subtitle}">
                        【2017春季全场2件8】春款薄绒休闲套头纯色印花连帽大码卫衣套装新款上新！！</p>
                </div>
                <!--<div class="wy-media-box2 weui-media-box_text">-->
                    <!--<div class="weui-media-box_appmsg">-->
                        <!--<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">优惠</span></div>-->
                        <!--<div class="weui-media-box__bd">-->
                            <!--<div class="promotion-message clear">-->
                                <!--<i class="yhq"><span class="label-text">优惠券</span></i>-->
                                <!--<span class="promotion-item-text">满197.00减40.00</span>-->
                            <!--</div>-->
                            <!--<div class="promotion-message clear">-->
                                <!--<i class="yhq"><span class="label-text">优惠券</span></i>-->
                                <!--<span class="promotion-item-text">满197.00减40.00</span>-->
                            <!--</div>-->
                            <!--<div class="yhq-btn clear"><a href="yhq_list.html">去领券</a></div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="wy-media-box2 weui-media-box_text">
                    <div class="weui-media-box_appmsg" th:each="spec :${specs}">
                        <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit"
                                                                            th:text="${spec.name}">尺码</span></div>
                        <div class="weui-media-box__bd">
                            <div class="promotion-sku clear">
                                <ul>
                                    <li th:each="specDetail :${spec.specificationsDetailList}"><a href="javascript:;"
                                                                                                  th:text="${specDetail.name}">M</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wy-media-box2 txtpd weui-media-box_text">
                    <div class="weui-media-box_appmsg">
                        <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">送至</span></div>
                        <div class="weui-media-box__bd">
                            <div class="promotion-message clear">
                                <span class="promotion-item-text">湖北</span>
                                <span class="promotion-item-text">武汉市</span>
                                <span class="promotion-item-text">花山</span>
                            </div>
                        </div>
                    </div>
                    <div class="weui-media-box_appmsg">
                        <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">运费</span></div>
                        <div class="weui-media-box__bd">
                            <div class="promotion-message clear">
                                <span class="promotion-item-text"><span
                                        th:if="${goods.freight==null||goods.freight==0}">免运费</span><div
                                        class="wy-pro-pri" th:if="${goods.freight>0}">¥<span class="num"
                                                                                             th:text="${goods.freight}">11.00</span></div></span>
                            </div>
                        </div>
                    </div>
                    <div class="weui-media-box_appmsg">
                        <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">收藏</span></div>
                        <div class="weui-media-box__bd">
                            <div class="promotion-message clear">
                                <span class="promotion-item-text"><span th:text="${goods.collectionnum}"></span>人</span>
                            </div>
                        </div>
                    </div>
                    <div class="weui-media-box_appmsg">
                        <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">提示</span></div>
                        <div class="weui-media-box__bd">
                            <div class="promotion-message clear">
                                <span class="promotion-item-text"><p class="txt-color-ml">支持7天无理由退换货</p></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tab2" class="weui-tab__bd-item ">
                <div class="pro-detail" th:utext="${goods.detail}">
                </div>
            </div>
            <div id="tab3" class="weui-tab__bd-item">
                <!--评价-->


            </div>
        </div>
    </div>
</div>
<span id="tophovertree" title="返回顶部"></span>
<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu">
    <a href="javascript:;" class="promotion-foot-menu-items">
        <div class="weui-tabbar__icon promotion-foot-menu-kefu"></div>
        <p class="weui-tabbar__label">客服</p>
    </a>
    <a href="javascript:;" id='show-toast' class="promotion-foot-menu-items">
        <div class="weui-tabbar__icon promotion-foot-menu-collection"></div>
        <p class="weui-tabbar__label">收藏</p>
    </a>
    <a href="/shopcar/front/myCar" class="promotion-foot-menu-items">
        <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
        <div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
        <p class="weui-tabbar__label">购物车</p>
    </a>
    <a href="javascript:;" class="weui-tabbar__item yellow-color open-popup" data-target="#join_cart">
        <p class="promotion-foot-menu-label">加入购物车</p>
    </a>
    <a href="javascript:;" class="weui-tabbar__item red-color open-popup" data-target="#selcet_sku">
        <p class="promotion-foot-menu-label">立即购买</p>
    </a>
</div>
<div id="join_cart" class='weui-popup__container popup-bottom' style="z-index:600;">
    <div class="weui-popup__overlay" style="opacity:1;"></div>
    <div class="weui-popup__modal">
        <div class="modal-content">
            <div class="weui-msg" style="padding-top:0;">
                <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
                <div class="weui-msg__text-area">
                    <h2 class="weui-msg__title">成功加入购物车</h2>
                    <p class="weui-msg__desc">亲爱的用户，您的商品已成功加入购物车，为了保证您的商品快速送达，请您尽快到购物车结算。</p>
                </div>
                <div class="weui-msg__opr-area">
                    <p class="weui-btn-area">
                        <a href="/shopcar/front/myCar" class="weui-btn weui-btn_primary">去购物车结算</a>
                        <a href="javascript:;" class="weui-btn weui-btn_default close-popup">不，我再看看</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="../../../static/wxui/lib/jquery-2.1.4.js" th:src="@{/wxui/lib/jquery-2.1.4.js}"></script>
<script src="../../../static/wxui/lib/fastclick.js" th:src="@{/wxui/lib/fastclick.js}"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
        $(".wy-header-icon-back").click(function (e) {
            window.history.back();
            e.stopPropagation();
        });
    });
</script>
<script src="../../../static/wxui/js/jquery-weui.js" th:src="@{/wxui/js/jquery-weui.js}"></script>
<script src="../../../static/wxui/js/swiper.js" th:src="@{/wxui/js/swiper.js}"></script>
<script>
    $(".swiper-zhutu").swiper({
        loop: true,
        paginationType: 'fraction',
        autoplay: 5000
    });
</script>
<script>
    $(function () {
        $(".promotion-sku li").click(function () {
            $(this).addClass("active").siblings("li").removeClass("active");
        })
    })
</script>
<script>
    /**
     * 显示商品评论
     */
    function listComment() {
        var goodsId = [[${goods.id}]];
        $.ajax({
            type: "post",
            url: "/comment/frontstage/listCollection",
            dataType: 'json',
            data: {
                "goodsId": goodsId
            },
            success: function (data) {
                var strContent = "";
                if (data.code == 200) {
                    if (data.data.length <1) {
                        strContent +='暂时无相关商品评论'
                    } else {
                        $.each(data.data, function (i, item) {
                            strContent += '<div class="weui-panel__bd">';
                            strContent += '<div class="wy-media-box weui-media-box_text">';
                            strContent += '<div class="weui-cell nopd weui-cell_access">';
                            strContent += '<div class="weui-cell__bd weui-cell_primary"><p>' + item.userName + '</p></div>';
                            strContent += '<span class="weui-cell__time">' + getLocalTime(item.createtime) + '</span>';
                            strContent += '</div>';
                            strContent += ' <div class="comment-item-star"><span class="real-star comment-stars-width' + item.level + '"></span></div>';
                            strContent += ' <p class="weui-media-box__desc">' + item.content + '</p>';
                            strContent += '<ul class="weui-uploader__files clear mg-com-img">';
                            var array = item.showimgs.split("，");
                            //console.log(array)
                            var length = array.length;
                            for (var i = 0; i < length; i++) {
                                strContent += '<li class="weui-uploader__file" style="background-image:url(' + array[i] + ')"></li>';
                            }
                            strContent += '</ul>';
                            strContent += '</div>';
                            strContent += '</div>'
                        });
                    }


                    $("#tab3").html(strContent);
                } else {
                    $.toast(data.msg, "text");
                }
            }
        });
    }


    /**
     * 用户点击收藏
     */
    $(document).on("click", "#show-toast", function () {
        var goodsId = [[${goods.id}]];
        var userId = [[${session.user.id}]];
        $.ajax({
            type: "post",
            url: "/collection/frontstage/userCollection",
            dataType: 'json',
            data: {
                "goodsid": goodsId,
                "userid": userId
            },
            success: function (data) {
                if (data.code == 200) {
                    $.toast(data.msg);
                } else {
                    $.toast(data.msg, "text");
                }
            }
        });
    })

    function getLocalTime(temp) {
        var time = new Date(temp);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        var d = time.getDate();//日
        var h = time.getHours();//时
        var mm = time.getMinutes();//分
        var s = time.getSeconds();//秒
        return (y + "-" + m + "-" + d)
    }
</script>
<script>
    $(document).on("open", ".weui-popup-modal", function () {
        console.log("open popup");
    }).on("close", ".weui-popup-modal", function () {
        console.log("close popup");
    });
</script>
<script>
    $(function () {
        initTopHoverTree("tophov" + "ertree", 30, 10, 10);
    })
</script>
<script>
    function initTopHoverTree(hvtid, times, right, bottom) {
        $("#" + hvtid).css("right", right).css("bottmo", bottom);
        $("#" + hvtid).on("click", function () {
            goTopHovetree(times);
        })
        $(window).scroll(function () {
            if ($(window).scrollTop() > 268) {
                $("#" + hvtid).fadeIn(100);
            }
            else {
                $("#" + hvtid).fadeOut(100);
            }
        });
    }

    //返回顶部动画
    //goTop(500);//500ms内滚回顶部
    function goTopHovetree(times) {
        if (!!!times) {
            $(window).scrollTop(0);
            return;
        }
        var sh = $('body').scrollTop();//移动总距离
        var inter = 13.333;//ms,每次移动间隔时间
        var forCount = Math.ceil(times / inter);//移动次数
        var stepL = Math.ceil(sh / forCount);//移动步长
        var timeId = null;

        function aniHovertree() {
            !!timeId && clearTimeout(timeId);
            timeId = null;
//console.log($('body').scrollTop());
            if ($('body').scrollTop() <= 0 || forCount <= 0) {//移动端判断次数好些，因为移动端的scroll事件触发不频繁，有可能检测不到有<=0的情况
                $('body').scrollTop(0);
                return;
            }
            forCount--;
            sh -= stepL;
            $('body').scrollTop(sh);
            timeId = setTimeout(function () {
                aniHovertree();
            }, inter);
        }
        aniHovertree();
    }
</script>
</body>
</html>
